<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
        <el-form-item label="园所名称" prop="title">
          <el-input
            v-model="queryParams.title"
            @input="handleInput"
            placeholder="请输入园所名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!-- <el-form-item label="年级" prop="grade">
         <el-select v-model="queryParams.grade" clearable placeholder="请选择年级">
            <el-option v-for="dict in gradeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
         </el-select>
       </el-form-item>
        <el-form-item label="班级" prop="class">
            <el-select v-model="queryParams.class" placeholder="请选择班级" clearable size="small">
            <el-option v-for="dict in classOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="学生姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入学生姓名"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-input
            v-model="queryParams.idcard"
            placeholder="请输入身份证号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
            <el-option
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="籍贯" prop="natives">
          <el-input
            v-model="queryParams.natives"
            placeholder="请输入籍贯"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="审核状态" prop="checkStatus">
          <el-select v-model="queryParams.checkStatus" placeholder="请选择审核状态" clearable size="small">
            <el-option
              v-for="dict in checkStatusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-table v-loading="loading" :data="studentApplyList" >
        <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
        <el-table-column label="园所名称" align="center" prop="schoolName" />
        <el-table-column label="学生姓名" align="center" prop="name" />
        <el-table-column label="身份证号" align="center" prop="idcard" />
        <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat" />
        <el-table-column label="联系人" align="center" prop="likman" />
        <el-table-column label="手机号" align="center" prop="mobile" />
        <el-table-column label="籍贯" align="center" prop="natives" />
        <el-table-column label="家庭住址" align="center" prop="address" />
        <!-- <el-table-column label="邮箱" align="center" prop="email" /> -->
        <el-table-column label="民族" align="center" prop="nation" />
        <el-table-column label="审核状态" align="center" prop="checkStatus" :formatter="checkStatusFormat" />
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import { listStudentEnroll} from "@/api/student/studentEnroll";
  import {  studentApplyList} from "@/api/qu/xwgl.js";
  export default {
    name: "zscs",
    data() {
      return {
        // 总条数
        total: 0,
        // 招生表格数据
        enrollList: [],
        // 招生报名表格数据
        studentApplyList: [],
        // 弹出层标题
        // 性别字典
        sexOptions: [],
        // 审核状态字典
        checkStatusOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          idcard: null,
          sex: null,
          likman: null,
          mobile: null,
          natives: null,
          address: null,
          nation: null,
        },
      };
    },
    created() {
      this.getList();
      this.getDicts("sys_user_sex").then(response => {
        this.sexOptions = response.data;
      });
      this.getDicts("check_status").then(response => {
        this.checkStatusOptions = response.data;
      });
      listStudentEnroll({'status':1}).then(response => {
        this.enrollList = response.rows;
      });
    },
    methods: {
      /** 查询招生报名列表 */
      async  getList() {
        this.loading = true;
        try {
          const obj = {
            schoolName:this.queryParams.title,
            name:this.queryParams.name,
            idcard:this.queryParams.idcard,
            sex:this.queryParams.sex,
            natives:this.queryParams.natives,
            checkStatus:this.queryParams.checkStatus,
            pageNum: this.queryParams.pageNum,
            pageSize: this.queryParams.pageSize,
          }
          const data =  await studentApplyList(obj);
          this.studentApplyList = data.rows;
          this.total = data.total;
          this.loading = false;
        } catch (error) {
          console.log(error);
        }
      },
         // 序号
      customeIndex(index){
           return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
        },
      // 性别字典翻译
      sexFormat(row, column) {
        return this.selectDictLabel(this.sexOptions, row.sex);
      },
      // 审核状态字典翻译
      checkStatusFormat(row, column) {
        return this.selectDictLabel(this.checkStatusOptions, row.checkStatus);
      },
      handleInput(val){
        let regtszf = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g; // 特殊字符正则
        let regkg = /[ ]/g;// 空格正则
        this.queryParams.title = val.replace(regtszf, '').replace(regkg, '');
         },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          name: null,
          idcard: null,
          sex: null,
          likman: null,
          mobile: null,
          natives: null,
          address: null,
          nation: null,
        },
        // this.resetForm("queryForm");
        this.handleQuery();
      },
    }
  };
  </script>
  